<template>
    <form>
        <div class="form-item username-box">
            <label data-star="*" :style="{ '--color': formData.color }" class="inpu-lable">{{
                formData.oneLabel
            }}</label
            ><input
                :class="[formData.type === 'password' ? 'input-white' : 'input-grey']"
                :type="formData.type"
                placeholder=""
                v-model="formData.username"
                @blur="isUsernameErrorFun"
                required
            />
            <label class="input-text" v-if="!formData.username">请输入{{ formData.oneLabel }}</label>
            <span class="error" v-if="isUsernameError">{{ formData.oneInput }}</span>
        </div>
        <div class="form-item password-box">
            <label data-star="*" :style="{ '--color': formData.color }" class="inpu-lable">{{
                formData.twoLabel
            }}</label
            ><input
                :class="[formData.type === 'password' ? 'input-white' : 'input-grey']"
                type="password"
                placeholder=""
                v-model="formData.password"
                @blur="isPasswordErrorFun"
                @click="slelctCity"
                :readonly="formData.isRead"
                required
            />
            <label class="input-text" v-if="!formData.password"
                >请{{ formData.isRead ? '选择' : '输入' }}{{ formData.twoLabel }}</label
            >
            <span class="error" v-if="isPasswordError">{{ formData.twoInput }}</span>
        </div>
    </form>
    <!-- 选择城市弹框 -->
    <teleport to="body">
        <div class="mask" v-if="isShow">
            <div class="dialog">
                <div class="head">
                    <button @click="isShow = false">取消</button><span>区域选择</span
                    ><button style="color: #068878">确定</button>
                </div>
            </div>
        </div>
    </teleport>
</template>

<script>
import { useRouter } from 'vue-router'
import { defineComponent, reactive, ref, toRefs } from 'vue'

export default defineComponent({
    name: 'Form',
    props: ['formData'],
    setup(props, ctx) {
        const data = reactive({
            isUsernameError: false,
            isPasswordError: false,
            isShow: false
        })
        const router = useRouter()
        // 表单校验
        const chekAllValue = type => {
            isUsernameErrorFun()
            isPasswordErrorFun()
            // 必填校验通过
            if (!data.isUsernameError && !data.isPasswordError) {
                if (type === 'updatePassword') {
                    // 旧密码一致
                    if (props.formData.oldPassword === props.formData.username) {
                        // 新密码与旧密码校验
                        if (props.formData.username === props.formData.password) {
                            props.formData.twoInput = '新密码不允许与旧密码一致'
                            data.isPasswordError = true
                        } else {
                            ctx.emit('updatePasword', props.formData.password)
                        }
                    } else {
                        props.formData.oneInput = '旧密码错误'
                        data.isUsernameError = true
                    }
                } else if (type === 'login') {
                    // 调用登录接口
                    // ***********
                    if (props.formData.username === 'kk' && props.formData.password === '666') {
                        // 登录成功前往首页
                        router.push('/home')
                    } else {
                        // 登录失败，输出提醒
                        // *********
                        console.log('登录失败')
                    }
                } else if (type === 'addUser') {
                    // 添加用户接口,提示添加成功
                    // ********
                    // 清空数据
                    props.formData.username = ''
                    props.formData.password = ''
                    data.isUsernameError = false
                    data.isPasswordError = false
                }
            }
        }
        // 城市选择
        const slelctCity = () => {
            if (props.formData.twoLabel === '销售区域') data.isShow = true
        }
        // 校验单元表单
        function isUsernameErrorFun() {
            if (!props.formData.username) {
                data.isUsernameError = true
            } else {
                data.isUsernameError = false
            }
        }

        function isPasswordErrorFun() {
            if (!props.formData.password) {
                data.isPasswordError = true
            } else {
                data.isPasswordError = false
            }
        }
        return {
            ...toRefs(data),
            isUsernameErrorFun,
            isPasswordErrorFun,
            slelctCity,
            chekAllValue
        }
    }
})
</script>

<style scoped lang="scss">
// 表单样式
.form-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid #eee;

    .input-text {
        position: absolute;
        bottom: 10px;
        left: 80px;
        font-size: 14px;
        pointer-events: none;
        transition: all 0.3s ease;
    }

    .inpu-lable {
        display: flex;
        font-size: 14px;
        word-break: keep-all;

        &:before {
            margin-right: 3px;
            font-size: 14px;
            color: var(--color);
            content: attr(data-star);
        }
    }

    input {
        width: 100%;
        height: 40px;
        margin-left: 42px;
        border: none;

        &:focus {
            outline: none;
        }

        &:focus ~ .input-text,
        &:valid ~ .input-text {
            font-size: 12px;
            color: #068878;
            transform: translateY(-16px);
        }
    }

    .error {
        position: absolute;
        bottom: -18px;
        left: 79px;
        z-index: 999;
        font-size: 12px;
        color: red;
    }
}

.password-box {
    margin: 20px 0;
}

.username-box {
    margin-top: 20px;
}

.input-grey {
    background-color: #f7f9fb;
}

.input-white {
    background-color: white;
}

// 弹框样式
.mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba($color: #000, $alpha: 0.3);

    .dialog {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 300px;
        overflow: hidden;
        background-color: white;
        border-radius: 20px 20px 0 0;
        box-shadow: 2px 2px 20px 1px rgb(0 0 0 / 10%);

        .head {
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            margin-top: 20px;

            button {
                background-color: white;
                border: none;
            }
        }
    }
}
</style>
